
<template>
	<view class="content">
		<view class="btn-warp">
			<view class="btn" :class="{active:active==1}" @click="clickBtn(1)">{{$t('yuce.zaishouyuce')}}({{attention.length}})</view>
			<view class="btn" :class="{active:active==2}" @click="clickBtn(2)">{{$t('yuce.zhuanjia')}}({{expertList.length}})</view>
		</view>
		<template v-if="active==1">
			<view class="item" @click="navigatorTo('/pages/forecastDetails/forecastDetails?id='+item.id)" v-for="(item,index) in attention" :key="index">
				<view class="i-top">
					<image class="image" :src="item.avatar||'https://www.soccerpet.com/static/img/default_photo.png'"></image>
					<view class="i-t-c">
						<view>{{item.nickname}}</view>
						<view class="text" style="margin-top: 4px;">
							<image :src="computresult(text)" style="width: 20px;height: 20px;border-radius: 50%;" v-for="(text,index) in item.tenResult" :key="index"></image>
						</view>
					</view>
					<view class="i-t-r">
						<text class="red" style="font-size: 16px;font-weight: bold;">{{item.weekWinrate}}%</text>
						<view style="white-space: nowrap;margin-right: 10px;">{{$t('yuce.jinqmz')}}</view>
					</view>
				</view>
				<view class="i-center">
					{{item.title}}
				</view>
				<view class="i-end">
					<view>{{item.playTypeStr}}</view>
					<view class="iiend">
						<view class="btn" v-if="item.propStr">{{item.propStr}}</view>
						<view class="num">{{item.money}}</view>
						<image class="image" src="../../static/image/yuce/zuanshi.png"></image>
					</view>
				</view>
			</view>
		</template>
		<template v-if="active==2">
			<view class="item" @click="navigatorTo('/pages/myPrediction/myPrediction?uid='+item.byuid+'&matchType=1')" v-for="(item,index) in expertList" :key="index">
				<view class="i-top">
					<image class="image" :src="item.avatar||'https://www.soccerpet.com/static/img/default_photo.png'"></image>
					<view style="width: 600rpx">
						<view>{{item.nickname}}</view>
						<view class="text">
							{{$t('yuce.guanzhu')}}：<text style="color: red;margin-right: 5px;">{{item.attentionNum}}</text>
							{{$t('yuce.zaishouyuce')}}：<text style="color: red;">{{item.recommendCount}}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api','userToken']),
			computresult(){
				return (result,type)=>{
					if(result=='1'){
						return '../../static/image/yuce/hong.png'
					}else if(result=='2'){
						return '../../static/image/yuce/ping.png'
					}else if(result=='-1'){
						return '../../static/image/yuce/hei.png'
					}
				}
			}
		},
		data() {
			return {
				active:1,
				attention:[],//在售预测
				expertList:[],//专家
			}
		},
		onLoad() {
			//在售预测
			this.attentionRecemmend()
			//专家
			this.attentionUserList()
		},
		methods:{
			navigatorTo(url){
				uni.navigateTo({
					url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickBtn(index){
				this.active=index
			},
			//在售预测
			attentionRecemmend(){
				let params={}
				uni.$u.http.post(this.api.api_v1_user_attentionRecemmend, params).then(res => {
					if(res.code==200&&res.data&&res.data.data){
						this.attention = res.data.data
					}
				})
			},
			//专家
			attentionUserList(){
				let params={}
				uni.$u.http.post(this.api.api_v1_user_attentionUserList, params).then(res => {
					if(res.code==200&&res.data&&res.data.data){
						this.expertList = res.data.data
					}
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.red{
		color: #f04545;
	}
	.content{
		padding: 5px 10px;box-sizing: border-box;color: #fff;font-size: 14px;
		.btn-warp{
			width: 100%;display: flex;align-items: center;padding:0px 20px;font-size: 14px;
			.btn {
				padding: 5px 15px;
			}
			.active{
				border-bottom: 1px solid #f56c6c; color: #f56c6c;
			}
		}
		.item{
			width: 100%;background-color: #242448;padding: 10px;box-sizing: border-box;border-radius: 5px;
			margin-top: 10px;
			.i-top{
				display: flex;justify-content: space-between;align-items: center;
				.image{
					width: 40px;height: 40px;margin-right: 10px;border-radius: 50%;
				}
				.i-t-c{
					width: 470rpx;
				}
				.i-t-r{
					font-size: 12px;width: 100rpx;display: flex;justify-content: center;flex-direction: column;align-items: center;
				}
			}
			.i-center{
				margin: 8px 0;
			}
			.i-end{
				display: flex;align-items: center;justify-content: space-between;
				.iiend{
					display: flex;align-items: center;
					.btn{
						padding: 4px 15px;background-color: rgb(240, 69, 69);border-radius: 15px;
					}
					.num{
						color: #f9da8a;font-size: 16px;margin: 0 10px;
					}
					.image{
						width: 20px;height: 16px;
					}
				}
			}
		}
	}
</style>
